import { View } from '@tarojs/components';
import s from './index.module.scss'
import Card from 'components/CodeCard';

import code from './code.md'

function Animation() {


  return(
    <View>
      <Card 
      title='order' 
      desc='order会按照设定好的排序，对元素进行排序，我给四个盒子分别设置 order 值为 1, 2, 3, 4， 然后我再改变第一个的 order 就会从新排序，但是 order 只对弹性盒子有效(flex),必需给它的父级设置 flex'
        renderCode={() => (
          <wemark md={code} link highlight type='wemark' />
        )
        }
      >
        <View className={s.container}>
          <View className={s.box1} style={{order:'1'}}>mybox</View>
          <View className={s.box2} style={{order:'2'}}></View>
          <View className={s.box3} style={{order:'3'}}></View>
          <View className={s.box4} style={{order:'4'}}></View>
        </View>
      </Card>
    </View>
  )
}

export default Animation;